<template>
	<view class="left clearfix detail-box">
		<view style="font-size:16px;padding:15px;background: #fff;">
			<uni-breadcrumb separator="/">
				<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
		</view>

		<!-- <loading v-if="loading" ></loading> -->
		
		<view  class="detail-content left clearfix">
			<uni-table border stripe :emptyText="data || '暂无更多数据'"  style="border:1px solid #ccc;min-height:200px;margin:10rpx 0" >
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" style="width:200px;">选项</uni-th>
					<uni-th>值</uni-th>
				</uni-tr>
				
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						举报人昵称
					</uni-td>
					<uni-td>
						{{data.nickname}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						被举报商家名称
					</uni-td>
					<uni-td>
						{{data.shop_title}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						举报类型
					</uni-td>
					<uni-td>
						{{data.type}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						联系电话
					</uni-td>
					<uni-td>
						{{data.tel}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						详细描述
					</uni-td>
					<uni-td>
						{{data.content}}
					</uni-td>
				</uni-tr>
				<uni-tr v-if="data.images">
					<uni-td align="center">
						图片
					</uni-td>
					<uni-td align="">
						<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
							<swiper-item v-for="(items, indexs) in data.images" :key="indexs">
								<image :src="items" mode="widthFix" width="50%"></image>
							</swiper-item>
						</swiper>
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						处理状态
					</uni-td>
					<uni-td>
						{{data.handle_result?data.handle_result.text:''}}
					</uni-td>
				</uni-tr>
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight">
						举报时间
					</uni-td>
					<uni-td align="">
						<uni-dateformat :date="data.create_date"></uni-dateformat>
					</uni-td>
				</uni-tr>
				
				<uni-tr >
					<uni-td align="center" class="detail-uni-td-weight" colspan="2" >
						<button   size="mini" @click="this.$refs.showStatus.open()" style="margin:0px 30px" type="primary" >
							处理
						</button>
					</uni-td>
				</uni-tr>
				
			</uni-table>
			
		</view>
	</view>
	
	
	<!-- 成功 提醒 -->
	<uni-popup ref="showStatus" type="center" backgroundColor="#fff">
		<view class="popup">
			<view class="title" style="color:#199bff">
				请您确保当前问题已经成功解决
			</view>
			<view style="line-height:80rpx;">
				当前问题已经成功解决,请确保问题得到妥善处理（问题得到妥善处理后应向问题发起人进行反馈）。
				<view style="color:#999">
					确认后将改变当前反馈数据信息
				</view>
			</view>
			<button @click="eventExamine" class="uni-button" size="mini" type="primary">
				确认已处理
			</button>
			<button @click=" this.$refs.showStatus.close() " class="uni-button" size="mini" type="">
				取消
			</button>
		</view>
	</uni-popup>
	
	
</template>
<script>
	import Util from "@/js_sdk/validator/util.js"
	const db  = uniCloud.database()
	const global = uniCloud.importObject("global",{customUI:true})
	const collection = "users_report"
	export default {
		data() {
			return {
				ID:'',
				// 面包屑
				routes: [
					{to: "/pages/index/index",name: "首页",},
					{to: "",name: "日志管理",},
					{to: "/pages/log/feedback/feedback",name: "意见反馈",},
					{to: "",name: "反馈详情"}
				],
				loading:true,
				data:{
					
				}
			}
		},
		onLoad(e) {
			this.ID = e._uid
			this.getData(this.ID)
		},
		methods: {
			getData(ID){
				db.collection(collection).where({_id:this.ID}).get({getOne: true,getCount: true}).then(res => {
					this.data = res.result.data
					this.loading = false
				})
			},
			// 修改数据
			eventExamine(){
				db.collection(collection).doc(this.ID).update({handle_result:{
					status:1,
					text:"已处理",
					handle_date:new Date().getTime(),
					handle_uid:uni.getStorageSync("uni-id-pages-userInfo")._id,
					handle_name:uni.getStorageSync("uni-id-pages-userInfo").nickname
				}}).then(res=>{
					this.$refs.showStatus.close()
					uni.showModal({
						title:"状态更改成功",
						content:"当前反馈已经成功解决，点击确认返回列表处",
						showcancel:false
					}).then(res=>{
						if (res.confirm) {
							uni.navigateTo({
								url:'/pages/log/report/list'
							})
						}
					})
				});
			},
			// 放大图片
			eventImage(image){
				uni.previewImage({
					urls:[image]
				})
			},
			goUrl(Url){
				uni.navigateTo({
					url:Url
				})
			},
			initMobile(mobile){
				return Util.formatPhoneNumber(mobile)
			},
			goback(){
				uni.navigateBack(1)
			}
		}
	}
</script>


<style scoped>
	.popup {
		width: 500px;
		border-radius: 20rpx;
		padding: 30rpx;
	
		button {
			margin: 20px 50rpx;
		}
	}
	.uni-button{
		margin:0 10rpx
	}
	.detail-box {
		width: 100%;
		min-height:400px;
		background: #fff;
	}

	.detail-content {
		width: 90%;
		min-height:300px;
		margin-left: 5%;
		margin-top: 20px;
	}
</style>